<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .oclick {
        width: 500px;
        height: 500px;
        border: 1px solid black;
        border-radius: 50%;
        margin: 0 auto;
        position: relative;
      }
      .second {
        width: 2px;
        height: 250px;
        background-color: red;
        position: absolute;
        left: 50%;

        transform: rotate(0deg);
        transform-origin: center bottom;
        border-radius: 1px;
      }
      .minute {
        width: 4px;
        height: 220px;
        background-color: black;
        position: absolute;
        left: 50%;
        top: 30px;
        transform-origin: center bottom;
        transform: rotate(0deg);
        border-radius: 2px;
      }
      .hour {
        width: 5px;
        height: 180px;
        background-color: blue;
        position: absolute;
        left: 50%;
        top: 70px;
        transform-origin: center bottom;
        transform: rotate(0deg);
        border-radius: 3px;
      }
    </style>
  </head>
  <body>
    <div class="oclick">
      <div class="second"></div>
      <div class="minute"></div>
      <div class="hour"></div>
      <script>
        var secondEle = document.getElementsByClassName("second")[0];
        var minuteEle = document.getElementsByClassName("minute")[0];
        var hourEle = document.getElementsByClassName("hour")[0];
        function fn() {
          var time = new Date();
          var second = time.getSeconds();
          // var minute = time.getMinutes();
          // var hour = time.getHours();
          var deg = 360 / (60 / second);
          // var deg1 = 360 / (60 / minute);
          // var deg2 = 360 / (12 / hour);

          secondEle.style.transform = `rotate(${deg}deg)`;
          // minuteEle.style.transform = `rotate(${deg1}deg)`;
          // hourEle.style.transform = `rotate(${deg2}deg)`;
        }
        function fn1() {
          var time = new Date();
          var minute = time.getMinutes();
          var deg1 = 360 / (60 / minute);
          minuteEle.style.transform = `rotate(${deg1}deg)`;
        }
        function fn2() {
          var time = new Date();
          var hour = time.getHours();
          var deg2 = 360 / (12 / hour);
          hourEle.style.transform = `rotate(${deg2}deg)`;
        }
        fn();
        setInterval(function () {
          fn();
        }, 1000);
        fn1();
        setInterval(function () {
          fn1();
        }, 60000);
        fn2();
        setInterval(function () {
          fn2();
        }, 3600000);
      </script>
    </div>
  </body>
</html>
